---
image: /generated/articles-docs-shapes-star.png
title: <Star />
crumb: '@remotion/shapes'
---

import {ShapeSeeAlso, ShapeOptions} from '../../components/shapes/shapes-info';

_Part of the [` @remotion/shapes`](/docs/shapes) package._

Renders an SVG element containing a star.

## Explorer

<Demo type="star" />

## Example

```tsx twoslash title="src/Star.tsx"
import {Star} from '@remotion/shapes';
import {AbsoluteFill} from 'remotion';

export const MyComposition = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Star points={5} innerRadius={100} outerRadius={200} fill="red" />
    </AbsoluteFill>
  );
};
```

## Props

<ShapeOptions shape="star" all />

## See also

<ShapeSeeAlso shape="star" />
